<template>
	<uv-modal :showConfirmButton="false" ref="modal" width="598rpx" full @close="modalClose">
		<view class="modal_centent relative" @tap.stop>
			<image :src="`${imgPath}record/print-modal-bg.png`" class="modal_centent absolute" />
			
			<view class="modal_close" @tap="modal?.close">
				<uv-icon name="close" size="32rpx" />
			</view>
			
			<view class="flex flex-col absolute mb">
				<text class="mx-auto font-600 text-36">打印提醒</text>
				<text class="mx-auto modal_tip text-26 mt-10">打印地址已复制到粘贴板</text>
				
				<!-- 打印统计 -->
				<view class="mt-70">
					<!-- <print_statistics :learn-info="learnInfo" /> -->
					<view class="flex-between">
						<view class="flex-col flex-center flex-1">
							<text class="statistics_title text-48 mb-5 font-600">{{ learnInfo?.totalWords || 0 }}</text>
							<text class="statistics_tip text-26">总词数</text>
						</view>
						
						<view class="flex-col flex-center flex-1">
							<text class="statistics_title text-48 mb-5 font-600">{{ learnInfo?.rightNumber || 0 }}</text>
							<text class="statistics_tip text-26">正确数</text>
						</view>
						
						<view class="flex-col flex-center flex-1">
							<text class="statistics_title text-48 mb-5 font-600">{{ learnInfo?.wrongNumber || 0 }}</text>
							<text class="statistics_tip text-26">错误数</text>
						</view>
					</view>
				</view>
				
				<view class="m-top mx-50">
					<fui-button text="确认" @click="modal?.close" />
				</view>
			</view>
		</view>
	</uv-modal>
</template>

<script setup>
	
	import { ref, onMounted, watch } from 'vue'
	import { imgPath } from '@/common/config'
	import { getlearnInfo } from '@/common/apis/record'
	
	import print_statistics from '../../components/statistics.vue'
	
	let prosp = defineProps({
		modelValue: { 
			type: Boolean, 
			default: false
		},
		learnId: {
			type: [String, Number],
			default: ''
		}
	})
	
	let modal = ref(null)
	let learnInfo = ref({})
	
	watch(() => prosp.learnId, async id => learnInfo.value = await getlearnInfo({ id }))
	
	watch(() => prosp.modelValue, show => {
		show && modal.value?.open()
		!show && modal.value?.close()
	})
	
	let emits = defineEmits(['update:modelValue'])
	let modalClose = () => emits('update:modelValue', false)
	
</script>


<style scoped lang="scss"> 
	.absolute{position: absolute;top: 0;bottom: 0;left: 0;right: 0}
	.modal_centent{height: 560rpx;width: 100%}
	.modal_close{position: absolute;right: 40rpx;top: 52rpx;z-index: 1}
	.modal_tip{color: #4A4A4A}
	.mb{margin-top: 43rpx;margin-bottom: 43rpx}
	.statistics_title{color: #3A3F5E}
	.statistics_tip{color: #626780}
</style>